import React, { useState } from 'react'
import { Table, Button, Drawer, Form, Input, Select, Tree } from 'antd'
import menus from './../../router/Menus'
import {adminAdd} from './../../api/admin'

function AdminList() {
  const [adminlist] = useState([])
  const [visible, setVisible] = useState(false)
  const [adminname, setAdminname] = useState('')
  const [password, setPassword] = useState('')
  const [role, setRole] = useState(1)
  const [checkedKeys, setCheckedKeys] = useState([])
  const columns = []

  const addAdmin = () => {

      adminAdd({
    adminname,
    password,
    role,
    checkedKeys
  }).then(res=>{

  })
  }

  return (
    <>
      <Button type="primary" onClick={() => setVisible(true)}>添加管理员</Button>
      <Table 
      dataSource = { adminlist }
      columns = { columns }
      rowKey = 'adminid'/>
      <Drawer
        title="添加管理员"
        width="600"
        placement="right"
        closable={true}
        onClose={ () => setVisible(false)}
        visible={ visible }
        footer={
          <div
            style={{
              textAlign: 'right',
            }}
          >
            <Button type="primary" onClick={ addAdmin }>
              添加
            </Button>
          </div>
        }
      >
        <Form	>
          <Form.Item>
            <Input placeholder="请输入管理员账号" onChange = { (e) => {
              setAdminname(e.target.value)
            }}></Input>
          </Form.Item>
          <Form.Item >
            <Input.Password placeholder="请输入管理员密码" onChange = { (e) => {
              setPassword(e.target.value)
            }}/>
          </Form.Item>
          <Form.Item >
            <Select defaultValue={1} onChange = { (value) => {
              setRole(value)
            }}>
              <Select.Option value={2}>超级管理员</Select.Option>
              <Select.Option value={1}>管理员</Select.Option>
            </Select>
          </Form.Item>
        </Form>
        {/* 树形菜单 */}
        <Tree
          checkable
          defaultExpandAll = { true }
          treeData={ menus }
          onCheck={ (checkedKeys, info) => {

            setCheckedKeys(info.checkedNodes)
          }}
        />  
      </Drawer>
        
    </>
  )
}

export default AdminList
